<!--
 * @Author: Tim
 * @Date: 2020-08-26 10:55:04
 * @LastEditTime: 2020-08-27 09:36:15
 * @LastEditors: Please set LastEditors
 * @Description: 条件选择框 && 自带选择
 * @FilePath: /afire/components/af_selector/index.vue
-->
<template>
    <view class="af-flex-row input-wrap" :class="disabled ? 'input-grey' : ''" :style="getStyl" @tap="onInputTap">
        <view class="af-flex-1 input-inner-wrap">
            <input class="af-txt-overflow ipt" data-id="inputId" :placeholder-class="placeholderClass"
                :placeholder="placeholder" :value="iptVal" :disabled="true" />
        </view>
        <view class="af-flex-row af-x-center right-arrow">
            <image class="arrow-ico" :class="disabled ? 'grey-ico' : ''" :src="selectArrowIcon" />
        </view>

        <!-- 弹窗list -->
        <af-drawer ref="selectorDrawer" :height="700">
            <view class="af-selector-hd">
                <text class="af-selector-hd-cancel" @tap.stop="closedDirect">取消</text>
                <text class="af-selector-hd-sure" @tap.stop="closeBox">确定</text>
            </view>

            <!-- 小区列表 -->
            <!--  indicator-class="af-selector-view-checked" -->
            <picker-view class="af-selector-view-wrap" :value="[pickId]" @change="onSelectorChange" v-if="openned">
                <picker-view-column>
                    <view class="af-selector-item-row" v-for="(item,index) in itemData" :key="index">
                        <text class="af-selector-item-txt">{{itemLabel ? item[itemLabel] : item}}</text>
                    </view>
                </picker-view-column>
            </picker-view>
        </af-drawer>
    </view>
</template>

<script>
    import AfDrawer from "@/components/af_drawer/index";

    export default {
        components: {
            AfDrawer
        },

        props: {

            disabled: Boolean,

            fontSize: {
                type: Number,
                default: 30
            },

            color: {
                type: String,
                default: '#14121E'
            },

            height: {
                type: Number,
                default: 60
            },

            borderColor: {
                type: String,
                default: '#E3E9F3'
            },

            borderRadius: {
                type: Number,
                default: 6
            },

            placeholderClass: String,

            placeholder: {
                type: String,
                default: "请选择"
            },

            value: String,

            itemData: Array,

            itemLabel: String
        },

        watch: {
            ///监听selector框内容变换
            'value': function (n, o) {
                if (n != o && this.iptVal != n) {
                    this.iptVal = n;
                    this.comparePickId(n);
                }
            }
        },

        computed: {
            getStyl() {
                let sty = `height:${this.height}rpx;`;
                if (this.borderColor != 'none') sty += `border: 1px solid ${this.borderColor};`;
                if (this.borderRadius > 0) sty += `border-radius: ${this.borderRadius}rpx;`;
                if (this.fontSize > 0) sty += `font-size:${this.fontSize}rpx;`;
                if (!this.color) styl += `color:${this.color};`;
                return sty;
            }
        },

        created() {
            if (this.value) {
                this.iptVal = this.value;

                this.comparePickId(this.value);
            }
        },

        data() {
            return {
                //默认的值
                iptVal: '',

                changeId: 0,

                ///选中数值
                pickId: 0,

                openned: false,

                selectArrowIcon: ''
            }
        },

        methods: {
            ///比对selector框选项
            comparePickId(val) {
                if (val && this.itemData.length > 0) {
                    for (let i = 0; i < this.itemData.length; i++) {
                        let item = this.itemData[i];

                        let cVal = this.itemLabel.length > 0 ? item[this.itemLabel] : item;

                        if (val == cVal) {
                            this.pickId = i;
                            this.changeId = i;
                            break;
                        }
                    }
                }
            },

            ///点击下拉框
            onInputTap() {
                if (this.disabled) return;

                if (this.itemData.length == 0) {
                    console.error('<af-selector></af-selector>组件itemData数组不能为空~');
                    return;
                }

                this.pickId = this.changeId;

                this.openned = true;
                this.$nextTick(() => {
                    if (this.$refs.selectorDrawer) this.$refs.selectorDrawer.open();
                });
            },

            ///确定按钮
            closeBox() {
                this.$refs.selectorDrawer.close(() => {
                    this.openned = false;

                    let item = this.itemData[this.changeId];

                    ///显示选中的效果
                    if (this.itemLabel.length > 0) this.iptVal = item[this.itemLabel];
                    else this.iptVal = item;

                    //重新请求
                    this.$emit('onSelectChange', {
                        item,
                        index: this.changeId
                    });
                });
            },

            ///滑动监听
            onSelectorChange(e) {
                let index = e.detail.value[0];
                this.changeId = index;
            },

            ///取消按钮
            closedDirect() {
                this.$refs.selectorDrawer.close(() => {
                    this.openned = false;
                });
            }

        }
    }
</script>

<style lang="scss" scoped>
    .input-wrap {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
    }

    .input-grey {
        background: #f8f8f8;
    }

    .input-inner-wrap {
        padding-left: 20upx;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .ipt {
        width: 100%;
        height: 100%;
    }

    .right-arrow {
        padding-right: 22upx;
    }

    .arrow-ico {
        width: 11upx;
        height: 18upx;
    }

    .grey-ico {
        opacity: 0.6;
    }

    /** picker css */
    .af-selector-hd {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 90upx;
        box-sizing: border-box;
        text-align: right;
    }

    .af-selector-item-row {
        line-height: 80upx;
        font-size: 32upx;
        text-align: center;
    }

    .af-selector-item-txt {
        font-size: 32upx;
    }

    .af-selector-hd-sure,
    .af-selector-hd-cancel {
        height: 100%;
        display: inline-block;
        padding: 0 35upx;
        font-size: 32upx;
        color: $uni-color-primary;
        line-height: 90upx;
    }

    .af-selector-view-wrap {
        height: 600upx;
    }

    .af-selector-view-checked {
        height: 80upx;
    }

    .af-selector-hd-cancel {
        color: grey;
    }
</style>